<template>
  <div>
    <div class="container">
      <el-table
        :height="tableHeight"
        :data="tableData"
        border
        v-loading="loading"
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
      >
        <el-table-column width="100" align="center" label="序号" fixed>
          <template v-slot="scope">
            {{ indexMethod(scope.$index, query.pageIndex, query.pageSize) }}
          </template>
        </el-table-column>
        <template v-for="item in columns">
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            align="center"
            v-if="item.prop === 'deviceStatus'"
          >
            <template v-slot="scope">
              {{ ["在线", "离线"][scope.row[item.prop]] }}
            </template>
          </el-table-column>
          <el-table-column
            v-else
            :prop="item.prop"
            :label="item.label"
            align="center"
          ></el-table-column>
        </template>

        <el-table-column label="操作" width="150" align="center">
          <template #default="scope">
            <el-button type="primary" plain @click="showModal(scope.row)">
              查看历史数据
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page="query.pageIndex"
          :page-size="query.pageSize"
          :total="pageTotal"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>

    <el-dialog
      title="历史数据"
      top="5vh"
      v-model="listVisible"
      width="80%"
      custom-class="dialogClass"
    >
      <el-table
        :data="TcpData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
      >
        <el-table-column width="100" align="center" label="序号" fixed>
          <template v-slot="scope">
            {{
              indexMethod(scope.$index, queryTcp.pageNumber, queryTcp.pageSize)
            }}
          </template>
        </el-table-column>
        <template v-for="item in columnsHistory">
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            align="center"
            v-if="item.prop === 'deviceStatus'"
          >
            <template v-slot="scope">
              {{ ["在线", "离线"][scope.row[item.prop]] }}
            </template>
          </el-table-column>
          <el-table-column
            v-else
            :prop="item.prop"
            :label="item.label"
            align="center"
          ></el-table-column>
        </template>
      </el-table>
      <el-pagination
        small
        layout="prev, pager, next"
        @current-change="changeTpcList"
        :total="queryTcp.total"
      >
      </el-pagination>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="basetable">
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { View, Search, Delete, Edit, Plus } from "@element-plus/icons-vue";
import {
  getOnlneList,
  getDevice,
  createDevice,
  deleteDevice,
  editDevice,
  TcpList,
  TcpChart,
  getNewLineLossAnalysisList,
  getNewDeviceHistoryData,
} from "../../../api/index";
import { indexMethod, getViewPortHeight } from "../../../utils/tools";
import { useRoute } from "vue-router";

const route = useRoute();
const myChart = ref(null);
const tableHeight = getViewPortHeight() - 320;
interface TableItem {
  id: number;
  name: string;
  money: string;
  state: string;
  date: string;
  address: string;
}
const columns = [
  { label: "台区名称", prop: "districtName" },
  { label: "设备编号", prop: "deviceNo" },
  { label: "本次监测开始时间", prop: "monitoringStartTime" },
  { label: "累计计量天数", prop: "accumulateMeteringDays" },
  { label: "设备状态", prop: "deviceStatus" },
  { label: "监测设备累计电量", prop: "deviceMeteredElectricity" },
  { label: "关联电表累计电量", prop: "electricityMeterMetering" },
  { label: "电量损失", prop: "energyLoss" },
  { label: "电量损失率 (%) ", prop: "energyLossRate" },
];

const columnsHistory = [
  { label: "日期", prop: "dateTime" },
  { label: "台区名称", prop: "districtName" },
  { label: "设备ID", prop: "deviceNo" },
  { label: "设备状态", prop: "deviceStatus" },
  { label: "监测电量", prop: "deviceMeteredElectricity" },
  { label: "关联电表电量", prop: "electricityMeterMetering" },
  { label: "电量损失", prop: "energyLoss" },
  { label: "电量损失率", prop: "energyLossRate" },
];
const query = reactive({
  address: "",
  testNo: "",
  pageIndex: 1,
  pageSize: 10,
});
const queryTcp = reactive({
  pageNumber: 1,
  pageSize: 10,
  total: 0,
  deviceNo: null,
  passNo: "0",
  measurementStartTime: null,
  measurementEndTime: null,
  time: null,
});
const queryCharts = reactive({
  endDate: null,
  passNo: "0",
  startDate: null,
  deviceNo: null,
  time: null,
});

const loading = ref(true);
const tableData = ref<TableItem[]>([]);
const TcpData = ref<TableItem[]>([]);
const pageTotal = ref(0);
// 获取表格数据
const getData = async () => {
  loading.value = true;
  const res = await getNewLineLossAnalysisList({
    deviceNo: Number(route.query.deviceNo) || "",
    pageNumber: query.pageIndex,
    pageSize: query.pageSize,
  });
  loading.value = false;
  tableData.value = res.rows;
  pageTotal.value = res.total || 0;
};
getData();
const listVisible = ref(false);

const getTcp = async () => {
  listVisible.value = true;
  const res = await getNewDeviceHistoryData({
    deviceNo: queryTcp.deviceNo,
    pageNumber: queryTcp.pageNumber,
    pageSize: queryTcp.pageSize,
  });
  TcpData.value = res.rows;
  queryTcp.total = res.total;
};
// 查询操作
const reset = () => {
  query.pageIndex = 1;
  query.testNo = "";
  getData();
};
const handleSearch = () => {
  query.pageIndex = 1;
  getData();
};
// 分页导航
const handlePageChange = (val: number) => {
  query.pageIndex = val;
  getData();
};
// Tpc列表分页
const changeTpcList = (val: number) => {
  queryTcp.pageNumber = val;
  getTcp();
};
const chartVisible = ref(false);
const tipBoolen = ref(false);
// Tpc折线图
const getTcpChart = (val: any) => {
  // let tiem1 = null;
  // let tiem2 = null;
  // if (val.deviceNo) {
  //   queryCharts.deviceNo = val.deviceNo;
  // }
  // chartVisible.value = true;
  // TcpChart({
  //   deviceNo: queryCharts.deviceNo,
  //   endDate: tiem2,
  //   passNo: queryCharts.passNo,
  //   startDate: tiem1,
  // }).then((val: any) => {
  //   const arr: any = [0];
  //   const titel: any = [""];
  //   tipBoolen.value = Boolean(val.rows.length);
  //   val.rows.forEach((item: any) => {
  //     arr.push(item.total);
  //     titel.push(item.dataTime);
  //   });
  //   // initChart(arr, titel);
  // });
};
// 重置折现图
const chartReset = () => {
  (queryCharts.time = null),
    (queryCharts.passNo = "0"),
    getTcpChart(queryCharts);
};

// 删除操作
const handleDelete = (row: any) => {
  // 二次确认删除
  ElMessageBox.confirm("确定要删除吗？", "提示", {
    type: "warning",
  })
    .then(async () => {
      const res: any = await deleteDevice({ id: row.id });
      if (res.code === 200) {
        ElMessage.success("删除成功");
        getData();
      } else {
        ElMessage.error("删除失败");
      }
    })
    .catch(() => {});
};

// 表格编辑时弹窗和保存
const editVisible = ref(false);
let form = reactive({
  name: "",
  address: "",
  deviceNo: "",
  electricNo: "",
  id: "",
  passNo: "",
  testNo: "",
});
const visibleType = ref("add");

// 新增
const add = () => {
  visibleType.value = "add";
  editVisible.value = true;
  form.deviceNo = "";
  form.electricNo = "";
  form.id = "";
  form.passNo = "";
  form.testNo = "";
};

const showModal = (item) => {
  listVisible.value = true;
  queryTcp.deviceNo = item.deviceNo;
  getTcp();
};
</script>
<style scoped lang="less"></style>
